<template>
  <view class="order-detail-container">
    <!-- 收货人信息 -->
    <view class="order-address">
              <view class="address-header">
          <view class="order-user">{{ order.consigneeName }}; {{ order.consigneePhone }}</view>
          <button v-if="order.orderStatus === 1" class="edit-address-btn" @click="goToAddressSelect">修改地址</button>
        </view>
      <view class="order-address-detail">{{ order.consigneeProvince }}{{ order.consigneeCity }}{{ order.consigneeRegion }}{{ order.consigneeStreet }}{{ order.consigneeDetail }}</view>
    </view>
    <!-- 商品列表 -->
    <view class="order-products">
      <view class="order-products-title">共{{ order.orderItems.length }}件商品</view>
      <view v-for="item in order.orderItems" :key="item.id" class="order-product" @click="goProductDetail(item.productId)">
        <image :src="item.productImg" class="order-img" />
        <view class="product-info">
          <view class="product-title">{{ item.productName }}</view>
          <view class="product-meta">
            <text class="product-price">￥{{ item.salePrice }}</text>
            <text class="product-num">x{{ item.quantity }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 联系客服 -->
    <view class="order-service">
      <text class="iconfont icon-service"></text> 联系客服
    </view>
    <!-- 订单信息 -->
    <view class="order-info">
      <view class="order-info-row">
        <text>订单编号：</text>
        <text>{{ order.orderSn }}</text>
        <button class="copy-btn" @click="copy(order.orderSn)">复制</button>
      </view>
      <view class="order-info-row">
        <text>下单时间：</text>
        <text>{{ order.createTime }}</text>
      </view>
      <view class="order-info-row">
        <text>支付状态：</text>
        <text>{{ getOrderStatusName(order.orderStatus) }}</text>
      </view>
      <view class="order-info-row">
        <text>支付方式：</text>
        <text>{{ order.payTypeName || '微信支付' }}</text>
      </view>
      <view class="order-info-row">
        <text>商品总价：</text>
        <text>￥{{ calcOrderTotal(order) }}</text>
      </view>
      <view class="order-info-row">
        <text>优惠券抵扣：</text>
        <text>-￥{{ order.couponAmount || '0.00' }}</text>
      </view>
      <view class="order-info-row">
        <text>实付款：</text>
        <text class="order-amount">￥{{ order.payAmount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderDetail } from '@/api/order/order'
export default {
  data() {
    return {
      order: {
        orderItems: []
      }
    }
  },
  methods: {
    getOrderStatusName(status) {
      const map = {
        0: '待付款',
        1: '待发货',
        2: '待收货',
        3: '待评价',
        4: '已完成'
      }
      return map[status] || '未知状态'
    },
    calcOrderTotal(order) {
      if (!order.orderItems) return '0.00'
      return order.orderItems.reduce((sum, item) => sum + (Number(item.salePrice) * Number(item.quantity)), 0).toFixed(2)
    },
    copy(text) {
      uni.setClipboardData({ data: text })
    },
    goProductDetail(productId) {
      this.$tab.navigateTo(`/pages/product/detail?id=${productId}`)
    },
    goToAddressSelect() {
      uni.navigateTo({
        url: '/pages/address/list?orderId=' + this.order.id
      })
    }
  },
  async   onLoad(options) {
    if (options && options.id) {
      const res = await getOrderDetail(options.id)
	  console.log(res)
      this.order = res.data || { orderItems: [] }
    }
  },
  onShow() {
    // 页面显示时刷新订单数据，获取最新的地址信息
    if (this.order.id) {
      this.refreshOrderData();
    }
  },
  
  // 刷新订单数据
  async refreshOrderData() {
    try {
      const res = await getOrderDetail(this.order.id);
      if (res.code === 200 && res.data) {
        this.order = res.data;
      }
    } catch (error) {
      console.error('刷新订单数据失败:', error);
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-container {
  background: #fafbfc;
  min-height: 100vh;
  padding-bottom: 30px;
}
.order-address {
  background: #fff;
  padding: 18px 16px 10px 16px;
  border-radius: 0 0 12px 12px;
  margin-bottom: 12px;
  .address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  .order-user {
    font-size: 16px;
    font-weight: bold;
  }
  .edit-address-btn {
    background: #f87e36;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 13px;
  }
  .order-address-detail {
    font-size: 14px;
    color: #888;
  }
}
.order-products {
  background: #fff;
  border-radius: 12px;
  margin: 0 0 12px 0;
  padding: 12px 16px 8px 16px;
  .order-products-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .order-product {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .order-img {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      margin-right: 10px;
      background: #f5f5f5;
    }
    .product-info {
      flex: 1;
      .product-title {
        font-size: 15px;
        color: #222;
        margin-bottom: 2px;
      }
      .product-meta {
        font-size: 13px;
        color: #888;
        .product-price {
          color: #f54b4b;
          margin-right: 10px;
        }
        .product-num {
          color: #888;
        }
      }
    }
  }
}
.order-service {
  background: #fff;
  border-radius: 12px;
  margin: 0 0 12px 0;
  padding: 12px 16px;
  color: #f87e36;
  display: flex;
  align-items: center;
  font-size: 16px;
  .iconfont {
    margin-right: 6px;
  }
}
.order-info {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 12px 0;
  .order-info-row {
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-bottom: 8px;
    .copy-btn {
      margin-left: 8px;
      font-size: 13px;
      color: #f87e36;
      background: #fff0e5;
      border: none;
      border-radius: 8px;
      padding: 2px 8px;
    }
    .order-amount {
      color: #f54b4b;
      font-weight: bold;
      font-size: 16px;
      margin-left: 8px;
    }
  }
}
</style> 